var pic = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F04%2F20210504062111_d8dc3.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131448&t=6f7b1534d0d276bbfdad97cdf85700e6'

var vm = new Vue({
    el: '#app',
    data: {//负责定义响应式数据
        btnArr: ['综合排序', '距离最近', '销量最高', '筛选'],
        list: [
            { name: '秋刀鱼', price: 88, pic, count: 1 },
            { name: '大黄鱼', price: 777, pic, count: 2 },
            { name: '皮皮虾', price: 9, pic, count: 3 },
        ]
    },
    methods: {//负责定义方法
        // 点击+号时物品数量+1
        add(item) {
            item.count++;
        },
        // 点击-号时物品数量-1
        sub(item) {
            // 最小是1
            if (item.count > 1) item.count--;
        },
        // 当点击清空时物品清空
        clear() {
            this.list = [];
        },
        sort(index) {
            if (index == 0) {//点击了第一个按钮
                this.list.sort((a, b) => {
                    return a.price - b.price;
                })
            }
            else if (index == 2) {//点击了第三个按钮
                this.list.sort((a, b) => {
                    return b.count - a.count;
                })
            }
        }
    },

})